<template>
  <view>
    <view class="tab-title">
      <van-tabs :active="active" @change="onChange" title-inactive-color="#B8C1CC" title-active-color="#141414"
        line-width="30px" animated="true" color="#841616">
        <van-tab title="代付款" class="allOrders">
          <block v-for="(orderItem,index) in awaitPayOrdersList" :key="index">
            <view class="allOrders-item" @click="goOrderDetail(orderItem.orderId)">
              <view class="allOrders-item-title">
                <view class="allOrders-item-title-left">
                  <text class="name">{{orderItem.consigneeName}}</text>
                  <text class="phone">{{orderItem.consigneePhone}}</text>
                </view>
                <view class="allOrders-item-title-right">
                  <text v-if="orderItem.orderStatus === '1'">待付款</text>
                  <text v-else-if="orderItem.orderStatus === '2'">待发货</text>
                  <text v-else-if="orderItem.orderStatus ==='3'">待收货</text>
                  <text v-else>已完成</text>
                </view>
              </view>
              <!-- 图片内容介绍区 -->
              <view class="content">
                <van-card :desc="orderItem.coding" :title="orderItem.goodsName"
                  :thumb="imgPrefixAddress + orderItem.goodsPreviews" custom-class="bgc">
                  <view slot="num">
                    共{{orderItem.number}}件 实付：{{orderItem.paymentAmountS}}
                  </view>
                  <view slot="footer" @click.stop>
                    <!-- 待付款 -->
                    <van-button size="small" @click.stop="cancelOrder(orderItem)">取消订单</van-button>
                    <van-button size="small" @click.stop="updateAddress(orderItem)">修改地址</van-button>
                    <van-button size="small" @click.stop="buyNow(orderItem)">立即付款</van-button>
                  </view>
                </van-card>
              </view>
            </view>
          </block>
        </van-tab>
        <!-- 代付款结束 -->
        <van-tab title="待发货" class="allOrders">
          <block v-for="(orderItem,index) in awaitSendGoodsOrdersList" :key="index">
            <view class="allOrders-item" @click="goOrderDetail(orderItem.orderId)">
              <view class="allOrders-item-title">
                <view class="allOrders-item-title-left">
                  <text class="name">{{orderItem.consigneeName}}</text>
                  <text class="phone">{{orderItem.consigneePhone}}</text>
                </view>
                <view class="allOrders-item-title-right">
                  <text v-if="orderItem.orderStatus === '1'">待付款</text>
                  <text v-else-if="orderItem.orderStatus === '2'">待发货</text>
                  <text v-else-if="orderItem.orderStatus ==='3'">待收货</text>
                  <text v-else>已完成</text>
                </view>
              </view>
              <!-- 图片内容介绍区 -->
              <view class="content">
                <van-card :desc="orderItem.coding" :title="orderItem.goodsName"
                  :thumb="imgPrefixAddress + orderItem.goodsPreviews" custom-class="bgc">
                  <view slot="num">
                    共{{orderItem.number}}件 实付：{{orderItem.paymentAmountS}}
                  </view>
                  <view slot="footer" @click.stop>
                    <!-- 待付款 -->
                    <view v-if="orderItem.orderStatus === '1'">
                      <van-button size="small" @click.stop="cancelOrder(orderItem)">取消订单</van-button>
                      <van-button size="small" @click.stop="updateAddress(orderItem)">修改地址</van-button>
                      <van-button size="small" @click.stop="buyNow(orderItem)">立即付款</van-button>
                    </view>
                    <!-- 待发货 -->
                    <view v-else-if="orderItem.orderStatus === '2'">
                      <van-button size="small" @click="shenqingkaipiao">申请开票</van-button>
                      <van-button size="small">催发货</van-button>
                      <van-button size="small" @click.stop="updateAddress(orderItem)">修改地址</van-button>
                    </view>
                    <!-- 待收货 -->
                    <view v-else-if="orderItem.orderStatus === '3'">
                      <van-button size="small">查看物流</van-button>
                      <van-button size="small" @click="buyAgain(orderItem)">再次购买</van-button>
                    </view>
                    <!-- 已完成 -->
                    <view v-else>
                      <van-button size="small">评价晒单</van-button>
                      <van-button size="small" @click="buyAgain(orderItem)">再次购买</van-button>
                    </view>
                  </view>
                </van-card>
              </view>
            </view>
          </block>
        </van-tab>
        <!-- 待发货结束 -->
        <van-tab title="待收货" class="allOrders">
          <block v-for="(orderItem,index) in awaitGoodsOrdersList" :key="index">
            <view class="allOrders-item" @click="goOrderDetail(orderItem.orderId)">
              <view class="allOrders-item-title">
                <view class="allOrders-item-title-left">
                  <text class="name">{{orderItem.consigneeName}}</text>
                  <text class="phone">{{orderItem.consigneePhone}}</text>
                </view>
                <view class="allOrders-item-title-right">
                  <text v-if="orderItem.orderStatus === '1'">待付款</text>
                  <text v-else-if="orderItem.orderStatus === '2'">待发货</text>
                  <text v-else-if="orderItem.orderStatus ==='3'">待收货</text>
                  <text v-else>已完成</text>
                </view>
              </view>
              <!-- 图片内容介绍区 -->
              <view class="content">
                <van-card :desc="orderItem.coding" :title="orderItem.goodsName"
                  :thumb="imgPrefixAddress + orderItem.goodsPreviews" custom-class="bgc">
                  <view slot="num">
                    共{{orderItem.number}}件 实付：{{orderItem.paymentAmountS}}
                  </view>
                  <view slot="footer" @click.stop>
                    <!-- 待付款 -->
                    <view v-if="orderItem.orderStatus === '1'">
                      <van-button size="small" @click.stop="cancelOrder(orderItem)">取消订单</van-button>
                      <van-button size="small" @click.stop="updateAddress(orderItem)">修改地址</van-button>
                      <van-button size="small" @click.stop="buyNow(orderItem)">立即付款</van-button>
                    </view>
                    <!-- 待发货 -->
                    <view v-else-if="orderItem.orderStatus === '2'">
                      <van-button size="small">申请开票</van-button>
                      <van-button size="small">催发货</van-button>
                      <van-button size="small">修改地址</van-button>
                    </view>
                    <!-- 待收货 -->
                    <view v-else-if="orderItem.orderStatus === '3'">
                      <van-button size="small" @click="chakanwuliu">查看物流</van-button>
                      <van-button size="small">确认收货</van-button>
                    </view>
                    <!-- 已完成 -->
                    <view v-else>
                      <van-button size="small">评价晒单</van-button>
                      <van-button size="small" @click="buyAgain(orderItem)">再次购买</van-button>
                    </view>
                  </view>
                </van-card>
              </view>
            </view>
          </block>
        </van-tab>
        <!-- 待收货结束 -->
        <van-tab title="已完成" class="allOrders">
          <block v-for="(orderItem,index) in completedOrdersList" :key="index">
            <view class="allOrders-item" @click="goOrderDetail(orderItem.orderId)">
              <view class="allOrders-item-title">
                <view class="allOrders-item-title-left">
                  <text class="name">{{orderItem.consigneeName}}</text>
                  <text class="phone">{{orderItem.consigneePhone}}</text>
                </view>
                <view class="allOrders-item-title-right">
                  <text v-if="orderItem.orderStatus === '1'">待付款</text>
                  <text v-else-if="orderItem.orderStatus === '2'">待发货</text>
                  <text v-else-if="orderItem.orderStatus ==='3'">待收货</text>
                  <text v-else>已完成</text>
                </view>
              </view>
              <!-- 图片内容介绍区 -->
              <view class="content">
                <van-card :desc="orderItem.coding" :title="orderItem.goodsName"
                  :thumb="imgPrefixAddress + orderItem.goodsPreviews" custom-class="bgc">
                  <view slot="num">
                    共{{orderItem.number}}件 实付：{{orderItem.paymentAmountS}}
                  </view>
                  <view slot="footer" @click.stop>
                    <!-- 待付款 -->
                    <view v-if="orderItem.orderStatus === '1'">
                      <van-button size="small" @click.stop="cancelOrder(orderItem)">取消订单</van-button>
                      <van-button size="small" @click.stop="updateAddress(orderItem)">修改地址</van-button>
                      <van-button size="small" @click.stop="buyNow(orderItem)">立即付款</van-button>
                    </view>
                    <!-- 待发货 -->
                    <view v-else-if="orderItem.orderStatus === '2'">
                      <van-button size="small">申请开票</van-button>
                      <van-button size="small">催发货</van-button>
                      <van-button size="small" @click.stop="updateAddress(orderItem)">修改地址</van-button>
                    </view>
                    <!-- 待收货 -->
                    <view v-else-if="orderItem.orderStatus === '3'">
                      <van-button size="small">查看物流</van-button>
                      <van-button size="small" @click="buyAgain(orderItem)">再次购买</van-button>
                    </view>
                    <!-- 已完成 -->
                    <view v-else>
                      <van-button size="small" @click="goPublish(orderItem)">评价晒单</van-button>
                      <van-button size="small" @click="buyAgain(orderItem)">再次购买</van-button>
                    </view>
                  </view>
                </van-card>
              </view>
            </view>
          </block>
        </van-tab>
        <!-- 已完成结束 -->
        <van-tab title="全部订单" class="allOrders">
          <block v-for="(orderItem,index) in allOrdersInfo" :key="index">
            <view class="allOrders-item" @click="goOrderDetail(orderItem.orderId)">
              <view class="allOrders-item-title">
                <view class="allOrders-item-title-left">
                  <text class="name">{{orderItem.consigneeName}}</text>
                  <text class="phone">{{orderItem.consigneePhone}}</text>
                </view>
                <view class="allOrders-item-title-right">
                  <text v-if="orderItem.orderStatus === '1'">待付款</text>
                  <text v-else-if="orderItem.orderStatus === '2'">待发货</text>
                  <text v-else-if="orderItem.orderStatus ==='3'">待收货</text>
                  <text v-else-if="orderItem.orderStatus ==='0'">已取消</text>
                  <text v-else>已完成</text>
                </view>
              </view>
              <!-- 图片内容介绍区 -->
              <view class="content">
                <van-card :desc="orderItem.coding" :title="orderItem.goodsName"
                  :thumb="imgPrefixAddress + orderItem.goodsPreviews" custom-class="bgc">
                  <view slot="num">
                    共{{orderItem.number}}件 实付：{{orderItem.paymentAmountS}}
                  </view>
                  <view slot="footer" @click.stop>
                    <!-- 待付款 -->
                    <view v-if="orderItem.orderStatus === '1'">
                      <van-button size="small" @click.stop="cancelOrder(orderItem)">取消订单</van-button>
                      <van-button size="small" @click.stop="updateAddress(orderItem)">修改地址</van-button>
                      <van-button size="small" @click.stop="buyNow(orderItem)">立即付款</van-button>
                    </view>
                    <!-- 待发货 -->
                    <view v-else-if="orderItem.orderStatus === '2'">
                      <van-button size="small" @click="shenqingkaipiao">申请开票</van-button>
                      <van-button size="small">催发货</van-button>
                      <van-button size="small" @click.stop="updateAddress(orderItem)">修改地址</van-button>
                    </view>
                    <!-- 待收货 -->
                    <view v-else-if="orderItem.orderStatus === '3'">
                      <van-button size="small">查看物流</van-button>
                      <van-button size="small" @click="buyAgain(orderItem)">再次购买</van-button>
                    </view>
                    <!-- 已取消 -->
                    <view v-else-if="orderItem.orderStatus === '0'">
                      <van-button size="small">删除订单</van-button>
                      <van-button size="small" @click="buyAgain(orderItem)">再次购买</van-button>
                    </view>
                    <!-- 已完成-->
                    <view v-else>
                      <van-button size="small">评价晒单</van-button>
                      <van-button size="small" @click="buyAgain(orderItem)">再次购买</van-button>
                    </view>
                  </view>
                </van-card>
              </view>
            </view>
          </block>
        </van-tab>
        <!-- 全部订单结束 -->
      </van-tabs>
    </view>
    <!-- pop弹出 -->
    <van-popup :show="show" @close="close" position="bottom" custom-style="height: 390px;" class="pop">
      <u-radio-group v-model="cancelReason" placement="column" iconPlacement="right">
        <u-radio
          :customStyle="{marginBottom: '18px',padding: '0 15px',fontSize: '14px',color:'#3D3D3D',height: '30px',lineHeight: '30px'}"
          v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name" @change="radioChange"
          activeColor="black">
        </u-radio>
      </u-radio-group>
    </van-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 当前取消订单的信息
        nowCancelOrderInfo: {},
        // 取消原因数组数据
        radiolist1: [{
            name: '价格儿有点贵',
            disabled: false
          },
          {
            name: '规格/款式/数量拍错',
            disabled: false
          },
          {
            name: '收货地址拍错',
            disabled: false
          }, {
            name: '款式不喜欢',
            disabled: false
          },
          {
            name: '暂时不想要了',
            disabled: false
          },
          {
            name: '其他',
            disabled: false
          },
        ],
        // 弹出层取消原因
        cancelReason: '',
        active: 4,
        show: false,
        //图片前缀
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
        // 全部订单
        allOrdersInfo: [],
        // completed已完成的数据
        completedOrdersList: [],
        // 待收货的数据
        awaitGoodsOrdersList: [],
        // 待发货的数据
        awaitSendGoodsOrdersList: [],
        // 待付款的数据
        awaitPayOrdersList: [],
      };
    },
    methods: {
      // 修改地址
      updateAddress(item) {
        uni.navigateTo({
          url: `/subpkg/orderPageUpdateAddressList/orderPageUpdateAddressList?id=${item.orderId}`
        })
        // this.getOrderAddressInfo(item.orderId)

      },
      // 获取订单收货地址信息
      // async getOrderAddressInfo(id) {
      //   const res = await uni.$http.get(`/flow/order/qyAddress/${id}`)
      //   console.log(res);
      // },
      // 再次购买
      buyAgain(item) {},
      // 立即购买函数请求
      async buyNowHandle(objData) {
        const res = await uni.$http.post('/flow/order/repayment', objData)
        const payObj = {
          timeStamp: res.data.data.timeStamp,
          nonceStr: res.data.data.nonceStr,
          package: res.data.data.package,
          paySign: res.data.data.paySign,
          signType: res.data.data.signType,
          orderNumber: res.data.data.orderNumber
        }
        this.wxpay(payObj)
      },
      // 微信支付
      async wxpay(payInfo) {

        await uni.requestPayment({
          nonceStr: payInfo.nonceStr,
          timeStamp: payInfo.timeStamp,
          package: payInfo.package,
          paySign: payInfo.paySign,
          signType: payInfo.signType,
          orderNumber: payInfo.orderNumber,
          success() {
            uni.$http.post('/flow/pay/callback', {
              orderNumber: payInfo.orderNumber,
              timeStamp: payInfo.timeStamp + '',
              nonceStr: payInfo.nonceStr + '',
              package: payInfo.package + '',
              paySign: payInfo.paySign + '',
              signType: payInfo.signType + ''
            })
            uni.$http.post('/flow/cart/payment', {
              cyclotron: '1',
              orderNumber: payInfo.orderNumber,
            })
            uni.$showMsg('支付成功')
            setTimeout(() => {
              uni.redirectTo({
                url: '/subpkg/customerOrders/customerOrders'
              })
            }, 1500)
          },
          fail() {
            uni.$http.post('/flow/pay/callback', {
              // orderNumber: payInfo.orderNumber,
              timeStamp: payInfo.timeStamp + '',
              nonceStr: payInfo.nonceStr + '',
              package: payInfo.package + '',
              paySign: payInfo.paySign + '',
              signType: payInfo.signType + ''
            })
            //  支付失败跳转到商品详情页
            uni.$showMsg('您取消了支付')
            uni.navigateBack()
          }
        })
      },
      // 去订单详情页面
      goOrderDetail(id) {
        uni.navigateTo({
          url: '/subpkg/orderDetails/orderDetails?orderId=' + id
        })
      },
      // 去评价详情页面
      goPublish(item) {
        uni.navigateTo({
          url: '/subpkg/publishTheListItem/publishTheListItem?orderInfo=' + encodeURIComponent(JSON.stringify(item))
        })
      },
      // 代付款页面的立即付款
      buyNow(item) {
        let obj = {
          orderId: item.orderId,
          openid: uni.getStorageSync('openId')
        }
        this.buyNowHandle(obj)
      },
      radioChange(e) {
        this.cancelReason = e
      },
      onClickItem(e) {
        if (this.current != e.currentIndex) {
          this.current = e.currentIndex;
        }
      },
      cancelOrder(e) {
        this.show = true
        this.nowCancelOrderInfo = {
          orderId: e.orderId - 0,
        }
      },
      // 取消订单请求
      async cancelOrderHandler(data) {
        const res = await uni.$http.post('/flow/order/cancel', data)
        if (res.data.code !== 200) return uni.$showMsg('取消订单失败,请重试')
        uni.$showMsg('取消成功')
        this.getOtherOrders(1)
      },
      close() {
        if (this.cancelReason == '') return
        this.nowCancelOrderInfo.cancel = this.cancelReason
        this.cancelOrderHandler(this.nowCancelOrderInfo)
        this.show = false
      },
      checkLogistics() {
        console.log('去物流');
      },
      // 获取所有订单信息
      async getAllOrders() {
        const res = await uni.$http.get('/flow/order/list')
        if (res.data.code !== 200) return uni.$showMsg('获取信息失败,请重试')
        res.data.rows.forEach(item => {
          if (item.goodsPreviews.indexOf(',') !== -1) {
            item.goodsPreviews = item.goodsPreviews.split(',')[0]
          }
        })
        this.allOrdersInfo = res.data.rows
      },
      // 获取其他订单信息
      async getOtherOrders(id) {
        const res = await uni.$http.get('/flow/order/list', {
          orderStatus: id
        })
        if (res.data.code !== 200) return uni.$showMsg('获取信息失败,请重试')
        switch (id) {
          case 1:
            res.data.rows.forEach(item => {
              if (item.goodsPreviews.indexOf(',') !== -1) {
                item.goodsPreviews = item.goodsPreviews.split(',')[0]
              }
            })
            this.awaitPayOrdersList = res.data.rows
            break;
          case 2:
            res.data.rows.forEach(item => {
              if (item.goodsPreviews.indexOf(',') !== -1) {
                item.goodsPreviews = item.goodsPreviews.split(',')[0]
              }
            })
            this.awaitSendGoodsOrdersList = res.data.rows
            break;
          case 3:
            res.data.rows.forEach(item => {
              if (item.goodsPreviews.indexOf(',') !== -1) {
                item.goodsPreviews = item.goodsPreviews.split(',')[0]
              }
            })
            this.awaitGoodsOrdersList = res.data.rows
            break;
          case 4:
            res.data.rows.forEach(item => {
              if (item.goodsPreviews.indexOf(',') !== -1) {
                item.goodsPreviews = item.goodsPreviews.split(',')[0]
              }
            })
            this.completedOrdersList = res.data.rows
            break;
        }
      },
      onChange(w) {
        switch (w.detail.index) {
          case 0:
            this.getOtherOrders(1)
            break;
          case 1:
            this.getOtherOrders(2)
            break;
          case 2:
            this.getOtherOrders(3)
            break;
          case 3:
            this.getOtherOrders(4)
            break;
          case 4:
            this.getAllOrders()
            break;
        }

      }
    },
    onLoad() {
      this.getAllOrders()
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F5F6F9;
  }

  .tab-title {
    .content {
      .bgc {
        background-color: white;
      }
    }

    width: 100%;
    height: 44px;
    background-color: white;
  }

  .allOrders {
    margin-top: 20px;
    padding: 0 8px;

    .allOrders-item {
      width: 100%;
      height: 205px;
      background-color: #fff;

      .allOrders-item-title {
        display: flex;
        align-items: center;
        padding-top: 8px;
        font-size: 14px;
        color: #3D3D3D;

        .allOrders-item-title-left {
          .name {
            margin-left: 16px;
          }

          .phone {
            margin-left: 20px;
          }
        }

        .allOrders-item-title-right {
          margin-left: 128px;
        }
      }
    }
  }

  // pop修改地址
  .default-address {
    margin-top: 30rpx;
    padding: 0 30rpx;
    display: flex;

    .text {
      margin-right: 40rpx;
      height: 30rpx;
      line-height: 55rpx;
    }
  }

  .label {
    .active {
      border: 1px solid black;
    }
  }

  .chooseAddress {
    color: #999999;
    font-size: 12px;
    line-height: 34px;
  }

  .zhanwei {
    height: 35px;
    background-color: white;
    margin-bottom: 20rpx;
  }

  .form-data {
    padding: 0 30rpx;
  }

  .label {
    display: flex;
    padding: 0 30rpx;
    align-items: center;

    view {
      margin-right: 30rpx;
    }

    .label-item {
      width: 60px;
      height: 28px;
      background-color: #EEF1F5;
      border-radius: 14px;
      text-align: center;
      line-height: 28px;
    }
  }

  .newAddress {
    position: fixed;
    bottom: 0;
    left: 29px;

    view {
      background-color: #000000;
      width: 325px;
      height: 36px;
      color: white;
      border-radius: 14px;
      line-height: 36px;
      text-align: center;
    }
  }
</style>